{% extends 'layout.html' %}

{% block css %}
<style>
.form-group {
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
    }

    .form-group label {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 8px;
    }

    .form-group input {
        width: 50%;
        padding: 10px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        transition: border-color 0.3s;
    }

    .form-group input:focus {
        border-color: #007bff;
        outline: none;
    }

    .form-group .button-wrapper {
        display: flex;
        {#justify-content: flex-end;#}
        margin-top: 10px;
    }

    .form-group button {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 15px;
        font-size: 14px;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .form-group button:hover {
        background-color: #0056b3;
    }
</style>
{% endblock %}



{% block content %}

    <div class="container">
    {% if request.user.usertype == 2 %}
    <div>
        <label>当前消费者的话费折扣为： {{ current_phone_discount_for_consumer }} </label>
    </div>

    <div>
        <label>当前消费者的点券折扣为：{{ current_game_discount_for_consumer }}</label>
    </div>

    <div>
        <label>供货商的话费折扣为：{{ current_phone_discount_for_vendor }}</label>
    </div>

    <div>
        <label>供货商的点券折扣为：{{ current_game_discount_for_vendor }}</label>
    </div>
    {% endif %}

        {% if request.user.usertype == 3 %}
    <div>
        <label>您当的话费折扣为： {{ current_phone_discount_for_consumer }} </label>
    </div>

    <div>
        <label>您的点券折扣为：{{ current_game_discount_for_consumer }}</label>
    </div>

    {% endif %}

    {% if request.user.usertype == 4 %}
        <div>
        <label>您的的话费折扣为：{{ current_phone_discount_for_vendor }}</label>
    </div>

    <div>
        <label>您的点券折扣为：{{ current_game_discount_for_vendor }}</label>
    </div>
    {% endif %}



    </div>

    {% if request.user.usertype == 2 %}
<div class="container">
    <div class="form-group">
        <label for="phone_discount_for_consumer">设置给消费者的话费折扣：</label>
        <input id="phone_discount_for_consumer" type="number" step="0.01" placeholder="请输入折扣值">
        <div class="button-wrapper ">
            <button id="submit_phone_discount_for_consumer">提交</button>
        </div>
    </div>


    <div class="form-group">
        <label for="game_discount_for_consumer">设置给消费者的点券折扣：</label>
        <input id="game_discount_for_consumer" type="number" step="0.01" placeholder="请输入折扣值">
        <div class="button-wrapper">
            <button id="submit_game_discount_for_consumer">提交</button>
        </div>
    </div>
</div>

    <div class="container">
    <div class="form-group">
        <label for="phone_discount_for_vendor">设置供应商的话费折扣：</label>
        <input id="phone_discount_for_vendor" type="number" step="0.01" placeholder="请输入折扣值">
        <div class="button-wrapper ">
            <button id="submit_phone_discount_for_vendor">提交</button>
        </div>
    </div>


    <div class="form-group">
        <label for="game_discount_for_vendor">设置供应商的点券折扣：</label>
        <input id="game_discount_for_vendor" type="number" step="0.01" placeholder="请输入折扣值">
        <div class="button-wrapper">
            <button id="submit_game_discount_for_vendor">提交</button>
        </div>
    </div>
</div>
    {% endif %}
{% endblock %}



{% block js %}
<script>
    $(document).ready(function () {
        $('#submit_phone_discount_for_consumer').click(function () {
            // 获取输入框的值
            let discount = $('#phone_discount_for_consumer').val();

            // 使用 AJAX 提交数据到后端
            $.ajax({
                url: '/notice/set/phone/discount/for/consumer/',  // 对应视图函数的URL
                type: 'POST',
                data: {
                    'discount': discount,
                    'csrfmiddlewaretoken': '{{ csrf_token }}'  // CSRF token
                },
                success: function (response) {
                    alert(response.message);  // 显示后端返回的提示信息
                },
                error: function (xhr) {
                    alert('设置失败：' + xhr.responseText);
                }
            });
        });
    });

    $(document).ready(function () {
        $('#submit_game_discount_for_consumer').click(function () {
            // 获取输入框的值
            let discount = $('#game_discount_for_consumer').val();

            // 使用 AJAX 提交数据到后端
            $.ajax({
                url: '/notice/set/game/discount/for/consumer/',  // 对应视图函数的URL
                type: 'POST',
                data: {
                    'discount': discount,
                    'csrfmiddlewaretoken': '{{ csrf_token }}'  // CSRF token
                },
                success: function (response) {
                    alert(response.message);  // 显示后端返回的提示信息
                },
                error: function (xhr) {
                    alert('设置失败：' + xhr.responseText);
                }
            });
        });
    });

    $(document).ready(function () {
        $('#submit_phone_discount_for_vendor').click(function () {
            // 获取输入框的值
            let discount = $('#phone_discount_for_vendor').val();

            // 使用 AJAX 提交数据到后端
            $.ajax({
                url: '/notice/set/phone/discount/for/vendor/',  // 对应视图函数的URL
                type: 'POST',
                data: {
                    'discount': discount,
                    'csrfmiddlewaretoken': '{{ csrf_token }}'  // CSRF token
                },
                success: function (response) {
                    alert(response.message);  // 显示后端返回的提示信息
                },
                error: function (xhr) {
                    alert('设置失败：' + xhr.responseText);
                }
            });
        });
    });

    $(document).ready(function () {
        $('#submit_game_discount_for_vendor').click(function () {
            // 获取输入框的值
            let discount = $('#game_discount_for_vendor').val();

            // 使用 AJAX 提交数据到后端
            $.ajax({
                url: '/notice/set/game/discount/for/vendor/',  // 对应视图函数的URL
                type: 'POST',
                data: {
                    'discount': discount,
                    'csrfmiddlewaretoken': '{{ csrf_token }}'  // CSRF token
                },
                success: function (response) {
                    alert(response.message);  // 显示后端返回的提示信息
                },
                error: function (xhr) {
                    alert('设置失败：' + xhr.responseText);
                }
            });
        });
    });
</script>
{% endblock %}